<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>评论列表</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>
    <style>
        .comment-tag {
            font-size: 0.6rem;
            color: #5b595b;
            padding-left: 0.5rem;
            border-bottom: 1px solid #d9d9d9;
        }

        .comment-tag span {
            display: inline-block;
            background-color: #fceae9;
            line-height: 1rem;
            margin: 0.3rem;
            border-radius: 0.2rem;
            padding: 0.2rem;
        }

        .comment-list {
            margin-top: 0.5rem;
            font-size: 0.8rem;
            color: #5b595b;
        }

        .comment-item .uinfo {
            padding-top: 0.2rem;
        }

        .comment-item {
            position: relative;
            padding-left: 0.5rem;
            margin-bottom: 0.2rem;
        }

        .comment-item .logoitem {
            display: inline-block;
        }

        .comment-item .cdate {
            display: inline-block;
            float: right;
            margin-right: 0.5rem;
            color: #d9d9d9;
        }

        .comment-item .ulogo {
            border-radius: 50%;
            width: 1.5rem;
            display: inline-block;
            height: 1.5rem;
            vertical-align: middle;
        }

        .comment-item .p-attr {
            font-size: 0.6rem;
            color: #d9d9d9;
        }

        .cmt-tag span {
            display: inline-block;
            background-color: #ffeffd;
            font-size: 0.4rem;
            border-radius: 0.2rem;
            padding: 0.2rem;
        }
    </style>
</head>

<body>
  <header class="aui-bar aui-bar-nav" id="header">
      <a class="aui-pull-left aui-btn" onclick="closewin();">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title">商品评价</div>
  </header>
    <div class="aui-content" id="cmt-box">
         <div class="comment-tag bgcolor-white">
            <span v-for="item in taglist">{{item.tagname}}({{item.clicknum}})</span>
        </div>
        <ul class="comment-list">
            <li class="comment-item bgcolor-white" v-for="item in cmtlist">
                <div class="uinfo">
                    <div class="logoitem"><img :src="item.logo_url" class="ulogo">
                        <span>{{item.nickname}}</span></div>
                    <div class="cdate">{{item.create_time_fmt}}</div>
                </div>
                <div class="cmt-content aui-ellipsis-2">{{item.content}}</div>
                <div class="cmt-tag"><span>质量好</span> <span>太棒了</span></div>
                <div class="p-attr">{{item.sku_str}} </div>

            </li>
        </ul>

    </div>

    <script>
        var pvm = new Vue({
            el: '#cmt-box',
            data: {
                product_id: '',
                page: 1,
                totalpage: 1,
                totalnum: 0,
                retback: true,
                taglist: [],
                cmtlist: []
            },
            methods: {
                goback: function() {
                    history.go(-1);
                },
                getcmtlist: function() {
                    if (pvm.page > pvm.totalpage || !pvm.retback) {
                        return;
                    }
                    pvm.retback = false;
                    $page.get_data('/api/comment/getList', 'post', {
                        'page': pvm.page,
                        'id': this.product_id
                    }, function(ret) {
                        pvm.totalpage = ret.data.totalpage;

                        pvm.page = pvm.page + 1;
                        pvm.retback = true;
                        pvm.totalnum = ret.data.totalnum;
                        ret.data.list.forEach(function(el) {
                            pvm.cmtlist.push(el);
                        });
                    });
                },
                gettaglist: function() {
                    $page.get_data('/api/comment/getCommentTags', 'post', {
                        id: this.product_id
                    }, function(ret) {
                        pvm.taglist = ret.data;
                    });
                }
            }
        });

        apiready = function() {
            pvm.product_id = api.pageParam.product_id;
            $page.init();
            $page.pullup(function(ret) {
                pvm.getcmtlist();
            });
            pvm.gettaglist();
            pvm.getcmtlist();
        }
    </script>
</body>

</html>
